<html>
<head>
<meta charset="UTF-8"/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<title>Register</title>
<link type="text/css" href="css/all.css" rel="stylesheet" />
<style>
.amLoginWrapper { clear: both; overflow: hidden; padding-top: 18px; text-align: left;height:400px; }
.leftSideLogin { clear: left; float: left; margin-left: 150px;width: 462px; }
.leftSideLogin h1 { border-bottom: 0 solid #FFFFFF; color: #303326; font-size: 26px; font-weight: 100; margin-bottom: 18px; text-transform: none; }
.leftSideLogin p { margin: 0; padding: 0; }
.leftSideLogin form p { position: relative; }
.leftSideLogin label { color: #414141; font-size: 13px; left: 35px; position: absolute; top: 26px; }
.leftSideLogin input.login.username { background: url("images/user.png") no-repeat scroll -2px -2px; border: 0 none; height: 46px; line-height:46px;font-size:12px; width: 288px; padding-left: 34px;display:block; }
.leftSideLogin p.loginHint { color: #9EA7B3; font-size: 10px; margin-bottom: 10px; word-spacing: -1px; }
.leftSideLogin input.login.password { background: url("images/pass.png") no-repeat scroll -2px -2px; border: 0 none; height: 46px;  line-height:46px;font-size: 12px; width: 288px; padding-left: 34px; display: block; }
.leftSideLogin input.email{background: url("images/emailinput.png") no-repeat scroll -2px -2px; border: 0 none; height: 46px; line-height:46px;font-size:12px; width: 288px; padding-left: 34px;display:block;}
.leftSideLogin p.loginHint { color: #9EA7B3; font-size: 10px; margin-bottom: 10px; word-spacing: -1px; }
input.loginimage { background: url("images/secure-login.png"); border: 0 solid #FFFFFF; cursor: pointer; height: 53px; margin-left: -5px; width: 299px;color:#fff;font-size:18px; font-weight:bold; }
.rightSideLogin { border-left: 1px solid #CECECE; clear: right; float: left; margin-bottom: 18px; padding-left: 18px; width: 290px; }
.rightSideLogin h2 { color: #303326; font-family: "Trebuchet", Trebuchet MS, serif; font-size: 18px; padding-bottom: 8px; }
.rightSideLogin p { color: #303326; font-size: 11px; line-height: 18px; margin-bottom: 10px; }
.pop-box { box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); width: 408px; z-index: 90; text-align: left; border-radius: 8px; -webkit-border-radius: 8px; }
.pop-main { background-color: #FFFFFF; border: 1px solid #BBBBBB; border-radius: 8px; -webkit-border-radius: 8px; }
.pop-main .pop-hd { background-color: #F4F4F4; padding: 8px 10px; position: relative; border-top-left-radius: 8px; border-top-right-radius: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; }
.pop-main .pop-hd h3 { color: #424242; font-size: 14px; }
.pop-main .pop-hd .close { background: url(${rc.getContextPath()}/front/images/box_close.gif); height: 13px; position: absolute; right: 8px; top: 10px; width: 11px; z-index: 2; }
label.fieldError2 {line-height: 23px;color: #ffb042;padding-left: 6px;margin: 12px 0 0 180px;}
label.fieldError {
	line-height: 23px;
	color: #ffb042;
	padding-left: 6px;
	margin: 12px 0 0 120px;
}
</style>
<link href="${rc.getContextPath()}/resources/css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/jquery.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/jquery.validate.js"></script>
<script type="text/javascript">
	jQuery.validator.addMethod("validPassword", function(value, element) {		 
		if($("#password1").val()== value){
			return true;
		}else{
			return false;
		}
	}, "Please input the same password"); 
	
	var base = '${rc.getContextPath()}';
	$(document).ready(function() {
		
		var msg = "${msg}";
		if (msg) {
			alert(msg);
		}

		var $inputForm = $("#registForm");
		$inputForm.validate({
			errorClass : "fieldError",
			rules : {
				loginName: {
					required:true,
					minlength:4,
					remote: {
	                    type: "post",
	                    url: "${rc.getContextPath()}/front/ajaxLoginName.html",
	                    data: {
	                    	loginName:function() {
	                            return $("#loginName").val();
	                        }
	                    },
	                    dataType: "html",
	                    dataFilter: function(data, type) {
	                    	eval("var data  = "+data+";");
	                        if (data.msg == "true")
	                            return "true";
	                        else {
	                        	var errMsg = data.msg;
	                        	if (errMsg && errMsg.indexOf("已存在")){
	                        		errMsg = "Username is exists";
	                        	}
	                            return errMsg;	                        
	                        }
	                    }
	                }					
				},
				password: {
					required:true,
					minlength:6			
				},
				password2: {
					required:true,
					minlength:6,
					validPassword:true				
				},
				email:{
					required:true,
					email:true,
					remote: {
	                    type: "post",
	                    url: "${rc.getContextPath()}/front/ajaxEmail.html",
	                    data: {
	                    	email:function() {
	                            return $("#useremail").val();
	                        }
	                    },
	                    dataType: "html",
	                    dataFilter: function(data, type) {
	                    	eval("var data  = "+data+";");
	                        if (data.msg == "true")
	                            return "true";
	                        else {
	                            return data.msg;	                        
	                        }
	                    }
	                }
				}
			}
		});
	});	
	
	function saveMember() {
		$('#registForm').submit()
	}
</script>
</head>
<body>
 <div id="header">
	<div class="topBar clearfix">
    <div class="inner">
      <ul class="fright clearfix">
        <li class="sltLanguage">Language&nbsp;[<a href="#" class="selected">English</a>&nbsp;<span class="sepLine">/</span>&nbsp;<a href="#">中文</a>]</li>
        <li class="sepLine">|</li>
        <#if login_member == null>
        <li>Welcome&nbsp;[<a href="javascript:void(0);" onClick="showpopbox()">Sign in</a>&nbsp;<span class="sepLine">/</span>&nbsp;<a  href="register.html">Register</a>]</li>
        <#else>
        <li>Welcome&nbsp;[<a href="javascript:void(0);" onClick="showPersonalInfo()">${loginName}</a>&nbsp;<span class="sepLine">/</span>&nbsp;<a  href="javascript:ajaxLoginOut()">LoginOut</a>]</li>
        </#if>
      </ul>
    </div>
  </div>
	<div class="row" style="height: 100px;">
		<div id="toplogo">
			<a href="#" alt="" title=""><img
				src="${base!}/front/images/logo.png"></a>
		</div>
		<ul id="top-menu">
			<li data-link="hotels-and-resorts" style="float: left"><a
				class="ga-topnav" id="ga-topnav-1" href="home.html" title="">Home</a>
			</li>
			<li data-link="serviced-suites" style="float: left"><a
				class="ga-topnav" id="ga-topnav-2" href="active.html" title="">Advisors</a>
			</li>
			<li data-link="meeting-and-events" style="float: left"><a
				class="ga-topnav" id="ga-topnav-3" href="card.html" title="">Member
					Benefits</a></li>
			<li data-link="celebrate" style="float: left"><a
				class="ga-topnav" id="ga-topnav-4" href="directories.html" title="">Directories</a>
			</li>
			<li data-link="loyalty-programmes" class="last"><a
				class="ga-topnav" id="ga-topnav-6" href="about.html">About La
					Luna</a></li>
		</ul>

	</div>
</div>
<div class="main">
  <div class="wrap">
  <div class="amLoginWrapper">
	<div class="leftSideLogin">	
		<h1>Fill in to Your Account</h1>
			<div class="loginOption">
				<form action="${base}/front/saveMember.html" method="post" name="registForm" id="registForm">
					<p><input type="text" name="loginName" id="loginName" class="login username" value="${member.loginName}"/></p>
					<p class="loginHint">Fill in User Name</p>
					<p><input type="password" name="password" id="password1" class="login password" /></p>
					<p class="loginHint">Fill in User Password</p>
					<p><input type="password" name="password2" id="password2" class="login password" /></p>
					<p class="loginHint">Confirm The Password</p>
                    <p><input type="text" name="email" id="useremail" class="email" value="${member.email}"/></p>
					<p class="loginHint">Fill in User Email</p>
					<input type="button" class="loginimage" border="0" value="Register" onclick="saveMember()"/>
				</form>				
			</div>
	</div>
	<div class="rightSideLogin">
		<h2>Everything just got easier!</h2>
		<p>Register is now a Web.com company. And that means you can now take advantage of special Friends & Family discounts on Web.com's acclaimed "Build it For Me" services, for a limited time.</p>
		<a href="#"><img width="287" height="200" src="images/tempyl.jpg" /></a>
	</div>
  </div>
  
</div>
</div>
<div class="footer">Copyright © 2014 <font color="#F78F07">La Luna Events</font> All Rights Reserved. </div>
<div class="pop-box Hide" style="width: 408px; height: auto; z-index: 2300; top:180px; left: 479px; position:absolute;">
  <div class="pop-main">
    <div class="pop-hd">
      <h3>Sign in</h3>
      <a class="close" title="" href="#" onClick="hidepopbox()"></a> </div>
    <div class="leftSideLogin" style="margin:20px auto;width:408px;float:none;">
      <div class="loginOption">
        <form style="margin-left: 60px;" name="loginForm" id="loginForm"> 
          <p>
            <input type="text" name="loginName" id="txtLoginName" class="login username" onkeydown="pwdKey(event)"/>
          </p>
          <p class="loginHint">User name and password are case sensitive</p>
          <p>
            <input type="password" name="password" id="txtPassword" class="login password" onkeydown="pwdKey(event)"/>
          </p>
          <p class="loginHint"><!--Forgot your <a href="#">password?</a>--></p>
          <input type="button" class="loginimage" border="0" value="Sign In" onclick="login()"/>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
function showpopbox() {
    $(".pop-box").removeClass("Hide");
}
function hidepopbox() {
    $(".pop-box").addClass("Hide");
}
$("#loginForm").validate({
	errorClass : "fieldError2",
	rules : {
		loginName: "required",
		password: "required"
	}
});
function pwdKey(ev) {
	if (ev.keyCode == 13) {
		login();
	}
}
function login() {
	var isValid = $("#loginForm").valid();
	if (isValid) {
		var loginName = document.getElementById("txtLoginName").value;
		var password = document.getElementById("txtPassword").value;
		if (password && loginName) {
			ajaxLoginIn(loginName,password);
		}
	}
}

function ajaxLoginIn(loginName, password) {
	$.ajax({
		type: "POST",
	    dataType: "json",
	    url: "${base!}/ajaxLoginIn.html",
	    data: { "loginName": loginName, "password": password },
	    success: function(json) {
	        if (json.msg == "true") {
				window.location.reload();
	        } else if (json.msg == "wrong") {
	            alert('Invalidate username or password!');
	        } else if (json.msg.indexOf("id=")==0) {
	        	location.href = "${base!}/front/membervalid.html?memberId="+json.msg.substring(3);
	        }
	    },
	    error: function() {
	        alert('System error!');
	    }
	});
}

function ajaxLoginOut(loginName, password) {
	if (window.confirm("Are you sure to loginOut?")) {
		$.ajax({
			type: "POST",
		    dataType: "json",
		    url: "${base!}/ajaxLoginOut.html",
		    data: { },
		    success: function(json) {
		        if (json.msg == "true") {
					window.location.reload();
		        } else {
		            alert(json.msg);
		        }
		    },
		    error: function() {
		        alert('System error!');
		    }
		});
	}
}

function showPersonalInfo() {
	location.href = "${base!}/front/personal.html";
}
</script>
</body>
</html>